<template>
  <div class="works_details">
    <div class="bg_title">
      {{ details.worksTitle }}
    </div>
    <Msg :details="details" />
    <HYTextTitle :title="details.modelName1" :content="details.modelContent1" />
    <HYTextTitle
      style="margin-top: 35px"
      :title="details.modelName2"
      :content="details.modelContent2"
    />
    <HYTextTitle style="margin-top: 35px" :title="'个人成果展示'" />
    <van-swipe @change="handSwWork" :autoplay="5000" lazy-render>
      <van-swipe-item v-for="(item, index) in artistWorks" :key="index">
        <img
          :src="$filters.prefix(item.imgUrl)"
          style="width:;100%;height: 195px;"
        />
      </van-swipe-item>
    </van-swipe>
    <div
      v-if="description"
      v-html="description"
      class="v-html"
      style="margin-top: 20px"
    ></div>
    <van-button
      @click="handVote()"
      style="width: 100%; margin-top: 20px"
      color="#BF1425"
      >投 票</van-button
    >
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, computed, toRefs } from "vue";
import { useRoute } from "vue-router";
import { selectOneArtist, votePc } from "@/utils/apis/home";
import Msg from "./components/Msg.vue";
import HYTextTitle from "@/components/HYTextTitle.vue";
import { openWebUrl } from "@/utils/config";
import { Toast } from "vant";

import { customizeId } from "@/utils/config";
interface Details {
  recordId: number;
  artistWorks: string;
}
export default defineComponent({
  name: "people",
  components: {
    Msg,
    HYTextTitle,
  },
  props: {},
  setup() {
    const state = reactive({
      details: {} as Details,
      description: "",
    });

    const route = useRoute();
    const { id } = route.query;

    onMounted(async () => {
      const res = await selectOneArtist({ id: id });
      state.details = res.data;
    });
    const artistWorks = computed(() => {
      if (state.details.artistWorks) {
        const newlist = JSON.parse(state.details.artistWorks);
        if (newlist.length !== 0) {
          state.description = newlist[0].description;
        }
        return newlist;
      } else {
        return [];
      }
    }) as any;
    const handSwWork = (index: number) => {
      if (artistWorks.value.length !== 0) {
        state.description = artistWorks.value[index].description;
      }
    };
    const handHead = () => {
      if (state.details.recordId) {
        window.open(
          `${openWebUrl}personDetail?recordId=${state.details.recordId}`
        );
      }
    };
    const handVote = async () => {
      const res = await votePc({
        customizeId,
        artistId: id,
      });
      Toast.success(res.content);
    };
    return { ...toRefs(state), handHead, handVote, artistWorks, handSwWork };
  },
});
</script>
<style lang="scss" scoped>
.works_details {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 269px);
  padding-bottom: 45px;
  .bg_title {
    color: #000;
    font-size: 20px;
    margin-bottom: 20px;
  }
}
</style>
